<template>
  <view class="page">
    <view class='mine'>
      <view class='userinfo'>
<!--        <image :src='testimage' class='logo'></image>-->
        <van-image width="120" height="120" :src="getStoreUserInfo.avatarUrl"  class="logo" round />
        <view  class="username"> {{getStoreUserInfo.nickName}}</view>
      </view>
      <view class='accountinfo'>
        <view class="hd">
          <view>积分</view>
          <view>0</view>
        </view>
        <view class='line'></view>
        <view class="bd">
          <view>优惠券</view>
          <view>0</view>
        </view>
      </view>
      <view class="listgroup line-after-top">
        <navigator url="../history/main" class="view-list arrow-right line-before-bottom" hover-class="weui-cell_active" open-type="navigate">
          <view class="list-text">我的记录</view>
        </navigator>
        <navigator url="../admin/main" class="view-list arrow-right line-before-bottom" hover-class="weui-cell_active" open-type="navigate">
          <view class="list-text">管理员登录</view>
        </navigator>
        <navigator url="../aboutMe/main" class="view-list arrow-right line-before-bottom" hover-class="weui-cell_active" open-type="navigate">
          <view class="list-text">关于我</view>
        </navigator>
      </view>
    </view>
  </view>

</template>

<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
  export default {
    data(){
      return {
        name:"simple"
      }
    },
    mounted(){
      console.log("me page")
    },
    computed: {
      ...mapState(['userInfo']),
      ...mapGetters(['getHasUserInfo','getStoreUserInfo'])
    },
  }

</script>

<style>
  /* pages/mine/index.wxss */
  .page{
    background-color: #f5f5f5;
    min-height: 100vh;
    overflow: hidden;
  }
  .mine{
    padding: 40px;
  }
  .userinfo {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 385px;
    background-color: #f8b62b;
    justify-content: center

  }
  /*.userinfo .logo{*/
  /*  width:380px;*/
  /*  height: 100px;*/
  /*  margin-bottom: 20px;*/
  /*}*/
  .username{
    margin-top: 10px;
  }
  .accountinfo{
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    position: relative;
    margin: 40px auto;
    align-items: center;
    text-align: center
  }

  .accountinfo .hd,.accountinfo .bd{
    flex: 1;
    font-size:36px;
  }

  .line{
    width: 1px;
    height: 120px;
    position: absolute;
    left: 50%;
    background-color: #e1e1e1;
  }

  .listgroup .view-list{
    display: flex;
    flex-direction: row;
    height: 100px;
    padding: 0 30px;
    align-items: center;
    color: #999999;
    font-size: 32px;
  }


</style>
